<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shouye.css">
    <link rel="stylesheet" href="./css/xiangqing.css">
</head>
<body>
    <!-- 头部 -->
    <div class="tou">
        <img src="https://img.alicdn.com/imgextra/i3/O1CN01is6Txt22H6MrneCWp_!!6000000007094-0-tps-1190-110.jpg" alt="">
    </div>
    <div class="dabiao">
        <div class="biaoti">
            <span class="iconfont icon-shouye"></span>
            <a href="javascript:;">天猫首页</a>
            <a href="javasceipt:;">喵，欢迎来天猫</a>
            <a href="./denglu.html" class="a100">请登陆</a>
            <a href="javascript:;" class="a1">免费注册</a>
            <div class="wodetaobao">
                <a href="javascript:;" class="a11">我的淘宝<b></b></a>
                <div class="tantao">
                    <a href="#">已买到的宝贝</a>
                    <a href="#">已卖出的宝贝</a>
                </div>
            </div>
            <span class="iconfont icon-gouwuche1"></span>
            <a href="javascript:;" >购物车</a>
            <div class="shouchangjia">
                <a href="javascript:;"  class="a11">收藏夹<b></b></a>
                <div class="tanshou">
                    <a href="#">收藏的宝贝</a>
                    <a href="#">收藏的店铺</a>
                </div>
            </div>
            <p class="p1"></p>
            <span class="iconfont icon-shouji"></span>
            <div class="shouji">
                <a href="javascript:;">手机版</a>
                <div id="shoujiban">
                    <img src="https://img.alicdn.com/tfs/TB1vJ0POwTqK1RjSZPhXXXfOFXa-175-215.png" alt="">
                </div>
            </div>
            <a href="javascript:;">淘宝网</a>
            <div class="shangjia">
                <a href="javascript:;" class="a11">商家支持<b></b></a>
                <div class="tanshang">
                    <div class="tanshang1">
                        <h3>商家：</h3>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                        <a href="#">商家中心</a>
                    </div>
                    <div class="tanshang2">
                        <h3>帮助：</h3>
                        <a href="#">商家服务大厅</a>
                        <a href="#">问商友</a>
                    </div>
                </div>
            </div>
            <div class="wangzhan">
                <a href="javascript:;" class="a11"><span class="iconfont icon-daohang"></span>网站导航<b></b></a>
                <div class="tandao">
                    <div class="tandaol">
                        <h3>热点推荐
                            <span>Hot</span>
                        </h3>
                        <a href="#">天猫超市</a>
                        <a href="#">天猫超市</a>
                        <a href="#">天猫超市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#" >天猫超市</a>
                        <a href="#" class="dashige">天猫超市
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                        <a href="#">天猫超市</a>
                        <a href="#">天猫超市</a>
                        <a href="#">天猫超市
                            <span class="iconfont icon-huore  huo"></span>
                        </a>
                        <a href="#">天猫超市
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                        <a href="#" class="dashige">天猫超市</a>
                        <a href="#">天猫超市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#">天猫超市</a>
                        <a href="#">天猫超市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#">天猫超市</a>
                        <a href="#" class="dashige">天猫超市
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                    </div>
                    <div class="tandaol" id="tubiao">
                        <h3 id="hangye">行业市场
                            <span>Market</span>
                        </h3>
                        <a href="#">天猫
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                        <a href="#">天猫</a>
                        <a href="#">超市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#" >天市</a>
                        <a href="#" class="dashige">超市
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                        <a href="#">天市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#">天猫</a>
                        <a href="#">天市
                            <span class="iconfont icon-huore  huo"></span>
                        </a>
                        <a href="#">超市
                        </a>
                        <a href="#" class="dashige">天猫</a>
                        <a href="#">天市
                            <span class="iconfont icon-xinpinrenqiwang xin"></span>
                        </a>
                        <a href="#">天超</a>
                        <a href="#">猫市
                        </a>
                        <a href="#">猫市</a>
                        <a href="#" class="dashige">天市
                            <span class="iconfont icon-huore huo"></span>
                        </a>
                    </div>
                    <div class="tandaor">
                        <h3>服务指南
                            <span>Help</span>
                        </h3>
                        <a href="#">品质保障</a>
                        <a href="#" class="dierge">品质保障</a>
                        <a href="#">品质保障</a>
                        <a href="#" class="dierge">品质保障</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索 -->
    <div class="sou">
        <div class="sou1">
            <div class="sou11">
                <h1>天猫超市</h1>
                <p>生活小事 随时天猫超市</p>
            </div>
        </div>
        <div class="sou2">
            <b>上海</b>
            <span class="iconfont icon-een lala"></span>
        </div>
        <div class="sousuo">
            
            <div class="soukuang">
                <input type="text" name="" id="sou" placeholder="搜索天猫超市商品">
                <a href="./sousuo.html"><button class="dianji">搜索</button></a>
            </div>
            
        </div>
        <div class="sou3">
            <span class="iconfont icon-2 la"></span>
            <b>一站式购齐</b>
            <span class="iconfont icon-num_ la"></span>
            <b>满88包邮</b>
            <img src="./img/WeChata56b8ce9ce4ea173a6a4af85970d78ea.png" alt="">
            
        </div>
    </div>
    <!-- 漂浮窗 -->
    <div class="guding" style="border-bottom: 1px solid #666;">
        <div class="guding1">
            <div class="chantou">
                <p>所有产品分类</p>
                <b >首页</b>
                <b class="ps">企业购物</b>
                <div class="che">
                    <span class="iconfont icon-gouwuche shopping"></span>
                    <b class="b1">¥0.00</b>
                    <b class="b2">元</b>
                    <b class="b3">0kg</b>
                    <b class="b4"></b>
                </div>
            </div>
        </div>
    </div>
    <!-- 具体详情----------------------------------------------------------- -->
    <div class="xfzuo cont">
        
            <div style="position: relative;">
                <div class="xlb">
                    <img src="https://img.alicdn.com/imgextra/i2/725677994/O1CN01frfMcY28vIixCM0h6_!!725677994.jpg_430x430q90.jpg" alt="">
                    <div class="mengceng"></div>
                </div>
            </div>
            <div class="xrb">
                <img src="https://img.alicdn.com/imgextra/i2/725677994/O1CN01frfMcY28vIixCM0h6_!!725677994.jpg_430x430q90.jpg" alt="">
            </div>
            <div class="xq">
                <h4>圣芝红酒整箱 法国原瓶进口梅洛纯酿送礼干红葡萄酒750ml×6瓶</h4>
                <p>原瓶进口</p>
                <div class="jiage" >
                    <b>价格</b>
                    <span>¥298</span>
                </div>
                <div class="yunfei" >
                    <b>运费</b>
                    <span>浙江嘉兴至 上海黄浦区 满88(20Kg内)包邮 配送规则 满88(20Kg内)包邮 配送规则
                        22:30前付款，承诺6月11日送达</span>
                </div>
                <div class="yunfei">
                    <b>重量</b>
                    <span>17kg</span>
                </div>
                <div class="yunfei" style="margin-top: 30px;">
                    <b>数量</b>
                    <input type="number" value="1" style="width: 50px;">
                </div>
                <a href="./shopping.html"><div class="jiaru">加入购物车</div></a>
            </div>
            <div class="xiaotu">
                <img src="https://img.alicdn.com/imgextra/i4/2206686532409/O1CN01lgW9b91TfMo00Q8ue_!!2206686532409-2-picassoopen.png_430x430q90.jpg" alt="">
                <img src="https://img.alicdn.com/imgextra/i1/6000000001636/O1CN01xqUgIB1NxKXsLQBkA_!!6000000001636-0-at.jpg_430x430q90.jpg" alt="">
                <img src="https://img.alicdn.com/imgextra/i4/725677994/O1CN01Z4V9gS28vIo1dfi22_!!725677994.jpg_430x430q90.jpg" alt="">
                <img src="https://img.alicdn.com/imgextra/i3/725677994/O1CN010tK2Cu28vIixCKfXT_!!725677994.jpg_430x430q90.jpg" alt="">
                <img src="https://img.alicdn.com/imgextra/i2/725677994/O1CN01frfMcY28vIixCM0h6_!!725677994.jpg_430x430q90.jpg" alt="">
            </div>
        <!-- </div> -->
    </div>
</body>
<script src="./libs/jquery.2.2.4.js"></script>
<script>
    function xxx(){
        
    var dbox=document.querySelector(".xlb")
    var xbox=document.querySelector(".xrb")
    var meng=document.querySelector(".mengceng")
    var ximg=document.querySelector(".xrb img")
    var dimg=document.querySelector(".xlb img")
    //第一步、、鼠标进入大盒子显示蒙层和小盒子，鼠标移出再隐藏
    dbox.addEventListener("mouseover",function(){
        meng.style.display="block"
        xbox.style.display="block"
    })
    dbox.addEventListener("mouseout",function(){
        meng.style.display="none"
        xbox.style.display="none"
    })
    //第二步、、设置蒙层的移动
    dbox.addEventListener("mousemove",function(e){
        var x=e.pageX-this.offsetLeft
        var y=e.pageY-this.offsetTop
        // console.log(x,y);
        var mengx=x-meng.offsetWidth/2-100
        var mengy=y-meng.offsetHeight/2-300
        //遮挡层最大移动距离
        var mengmax=dbox.offsetWidth-meng.offsetWidth
        if(mengx<=0){
            mengx=0
        }else if(mengx>=dbox.offsetWidth-meng.offsetWidth){
            mengx=dbox.offsetWidth-meng.offsetWidth
        }
         if(mengy<=0){
            mengy=0
        }else if(mengy>=dbox.offsetHeight-meng.offsetHeight){
            mengy=dbox.offsetHeight-meng.offsetHeight
        } 
        meng.style.left=mengx+dbox.offsetLeft-20+"px"
        meng.style.top=mengy+dbox.offsetTop-20+"px"
        //3.大图的移动距离=遮挡层移动距离 * 大图最大移动距离 / 遮挡层最大移动距离
        
        //大图的最大移动距离：
        var ximgmax=ximg.offsetWidth-xbox.offsetWidth
        var bigx=mengx*ximgmax/mengmax
        var bigy=mengy*ximgmax/mengmax
        ximg.style.left=-bigx+"px"
        ximg.style.top=-bigy+"px"
    })
    var imgs=document.querySelectorAll(".xiaotu img")
    // console.log(imgs);
    for(var i=0;i<imgs.length;i++){
        imgs[i].onmouseover=function(){
            dimg.src=this.src
            ximg.src=this.src
        }
    }
    }

    // console.log(location.search.split("=")[1]);
    const id=location.search.split("=")[1]
    $.ajax({
        url:"./data/data.json",
        success:(res)=>{
            res=JSON.parse(res)
            // console.log(res);
            let i=0
            res.some((val,idx)=>{
                i=idx
                return val.proId===id
            })
            // console.log(res[i]);
            render(res[i])
            xxx();
        }
    })
    function render(data){
        let str=`
        <div style="position: relative;">
                <div class="xlb">
                    <img src="${data.url}" alt="">
                    <div class="mengceng"></div>
                </div>
            </div>
            <div class="xrb">
                <img src="${data.url}" alt="">
            </div>
            <div class="xq">
                <h4>${data.name}</h4>
                <p>原瓶进口</p>
                <div class="jiage" >
                    <b>价格</b>
                    <span>¥${data.price}</span>
                </div>
                <div class="yunfei" >
                    <b>运费</b>
                    <span>${data.dizi}</span>
                </div>
                <div class="yunfei">
                    <b>重量</b>
                    <span>${data.kg}</span>
                </div>
                <div class="yunfei" style="margin-top: 30px;">
                    <b>数量</b>
                    <input type="number" value="1" style="width: 50px;">
                </div>
                <a href="./shopping.html"><div class="jiaru">加入购物车</div></a>
            </div>
            <div class="xiaotu">
                <img src="${data.url1}" alt="">
                <img src="${data.url2}" alt="">
                <img src="${data.url3}" alt="">
                <img src="${data.url4}" alt="">
                <img src="${data.url}" alt="">
            </div>`
        $(".cont").html(str)
    }
</script>
</html>